<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="card-sold" :body-style="{ height: '168px'}">
          <span>总销量</span>
          <p>
            <span>￥13,025.00</span>
          </p>
          <div class="right-icon">
            <span class="icon iconfont">&#xe995;</span>
          </div>
          <div class="bottom">
            自上周以来 <i class="el-icon-upload2"></i>10%
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="card-sub" :body-style="{ height: '168px'}">
          <span>总成交</span>
          <p>
            <span>3,140</span>
          </p>
          <div class="right-icon">
            <span class="icon iconfont">&#xe74b;</span>
          </div>
          <div class="bottom">
            自上周以来 <i class="el-icon-upload2"></i><span>44%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="card-user" :body-style="{ height: '168px'}">
          <span>活跃用户</span>
          <p>
            <span>4,158</span>
          </p>
          <div class="right-icon">
            <span class="icon iconfont">&#xe676;</span>
          </div>
          <div class="bottom">
            自上周以来 <i class="el-icon-upload2"></i><span>30%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="card-pay" :body-style="{ height: '168px'}">
          <span>订单</span>
          <p>
            <span>17,681</span>
          </p>
          <div class="right-icon">
            <span class="icon iconfont">&#xe897;</span>
          </div>
          <div class="bottom">
            自上周以来 <i class="el-icon-upload2"></i><span>10%</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-line" :body-style="{ padding: '0',height:'300px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>趋势
                </span>
            </div>
            <div class="chart-pic" ref="chart_1"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="chart-line" :body-style="{ padding: '0',height:'300px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-s-help"></i>分布
                </span>
            </div>
            <div class="chart-pic" ref="chart_2"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="chart-line" :body-style="{ padding: '0',height:'300px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-money"></i>消费排行
                </span>
            </div>
            <div class="chart-pic" ref="chart_3"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover" class="tab-table" :body-style="{height:'360px'}">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="配送管理" name="first">
              <el-table
                :data="tableData"
                height="250"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="省份"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="地区"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址">
                </el-table-column>
                <el-table-column
                  prop="code"
                  label="邮编"
                  width="180">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="区域管理" name="second">
              <el-table
                :data="tableData"
                height="250"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="省份"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="地区"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址">
                </el-table-column>
                <el-table-column
                  prop="code"
                  label="邮编"
                  width="180">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "board",
  data(){
      return {
        activeName: 'first',
        tableData: [{
          date: '2016-05-03',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '河北彩花',
          province:'上海',
          area:'普陀区',
          code:'525200',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
  }
  },
  methods:{
    handleClick(tab, event) {
      console.log(tab, event);
    },
    drawLine(){
      let content = this.$refs.chart_1
      let myChart = this.$echarts.init(content)
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
        }, {
          axisPointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisTick: {
            show: false
          },

          position: 'bottom',
          offset: 20,
          data: ['', '', '', '', '', '', '', '', '', '', {
            value: '周六',
            textStyle: {
              align: 'left'
            }
          }, '周日']
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
        }],
        series: [{
          name: '移动',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color:  this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(137, 189, 27, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(137, 189, 27, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(137,189,27)',
              borderColor: 'rgba(137,189,2,0.27)',
              borderWidth: 12

            }
          },
          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
        }, {
          name: '电信',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)',
              borderColor: 'rgba(0,136,212,0.2)',
              borderWidth: 12

            }
          },
          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
        }, {
          name: '联通',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219, 50, 51, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {

              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
        }, ]
      };
      myChart.setOption(option)
    },
    drawPie(){
      let content = this.$refs.chart_2
      let myChart = this.$echarts.init(content)
      const color = [
        '#0CD2E6',
        '#3751E6',
        '#FFC722',
        '#886EFF',
        '#008DEC',
        '#114C90',
        '#00BFA5',
      ];
      const data = [
        {
        "name": "A类型",
        "value": 30
      },
        {
          "name": "B类型",
          "value": 10
        },
        {
          "name": "C类型",
          "value": 15
        },
        {
          "name": "D类型",
          "value": 23
        },
        {
          "name": "E类型",
          "value": 10
        },
        {
          "name": "其他",
          "value": 12
        }
      ]
      function setChartOption(data) {
        const formatData = [];
        data.forEach(function(item, index) {
          formatData.push({
            value: item.value,
            name: item.name,
            itemStyle: {
              normal: {
                borderWidth: 10,
                shadowBlur: 20,
                borderColor: color[index],
                shadowColor: color[index],
              },
            },
          }, {
            value: 5,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                labelLine: {
                  show: true,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          })
        })

        return formatData;
      }
      let option = {
        backgroundColor: '#FFF',
        color: color,
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['50%', '52%'],
          hoverAnimation: false,
          data: setChartOption(data),
        }, ],
      }
      myChart.setOption(option)
    },
    drawBar(){
      let content = this.$refs.chart_3
      let myChart = this.$echarts.init(content)

      let colorArray = [
        {
          top: 'rgba(173,39,49)',//红shen
          bottom: 'rgba(173,39,49, 0.3)'
        },
        {
          top: 'rgba(195,175,49)',//黄
          bottom: 'rgba(195,175,49, 0.3)'
        },{
          top: 'rgba(56,215,48)',//绿
          bottom: 'rgba(56,215,48, 0.3)'
        },
        {
          top: 'rgba(40,203,195)',//蓝
          bottom: 'rgba(40,203,195, 0.3)'
        },{
          top: 'rgba(42,45,221)',//深蓝
          bottom: 'rgba(42,45,221, 0.3)'
        },
        {
          top: 'rgba(215,47,215)',//粉
          bottom: 'rgba(215,47,215, 0.3)'
        }
      ];
      let option = {
        backgroundColor: '#fff',
        grid: {
          top:'10%',
          left: '3%',
          right: '20%',
          bottom: '10%',
          containLabel: true
        },

        tooltip: {
          show:true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis:  {
          type: 'value',
          position:'top',
          show:false,
          axisTick : {show: false},
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false
          },
        },
        yAxis: [
          {
            type: 'category',
            axisTick : {
              show: true,
              alignWithLabel: true,
              length:5,
            },
            inverse:'true', //排序
            axisLine: {
              show: true,
              lineStyle:{
                color:'#000',
              }
            },
            data: ['楼一','楼二','楼三','楼四','楼五','楼六']
          }

        ],
        series: [
          {
            name: '能耗值',
            type: 'bar',
            label:{
              show:true,
              position: 'right',
              color:'#000',
              formatter:'{c}万元'
            },
            itemStyle:{
              normal: {
                show: true,
                color: function (params) {
                  let num = colorArray.length;
                  return{
                    type: 'linear',
                    colorStops: [{
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }, {
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }, {
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }, {
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }, {
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }, {
                      offset: 0, color: colorArray[params.dataIndex%num].bottom
                    }, {
                      offset: 1, color: colorArray[params.dataIndex%num].top
                    }],
                    //globalCoord: false
                  }
                },
                barBorderRadius:88,
                borderWidth:0,
                borderColor:'#333',
              }
            },
            barGap:'0%',
            barCategoryGap:'50%',
            data: [60, 132, 101, 134,165,180]
          }

        ]
      };
      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawLine()
    this.drawPie()
    this.drawBar()
  }
}
</script>

<style scoped lang="scss">

.app-container{
  padding-bottom: 70px;
  .grid-content{
    border-radius: 0px!important;
  }
  .card-sub,.card-sold,.card-user,.card-pay{
    span{
      font-size: 14px;
    }
    p{

      span{
        font-size: 28px;
      }
    }
    .right-icon{
      position: absolute;
      top: 50%;
      right: 20px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      color: #6954f0;
      text-align: center;
      background: #f0eefe;
      border-radius: 50%;
      transform: translateY(-50%);
      span{
        font-size: 35px;
      }
    }
  }
  .card-sub,.card-user,.card-pay{
    position: relative;
    color: #000;
    background: white;
    .bottom{
      padding-top: 10px;
      font-size: 14px;
      i{
        margin: 0 2px;
      }
      span,i{
        color: #13ce66;
      }
    }
  }
  .card-sold{
    position: relative;
    color: #fff;
    background: linear-gradient(90deg,#a598f6,#6954f0);

    .bottom{
      padding-top: 10px;
      font-size: 14px;
      i{
        margin: 0 2px;
      }
    }
  }
  .chart-line{
    .chart-pic {
      width: 100%;
      height: 240px;
      margin: 0 auto;
    }
    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .icon-chart {
        font-size: 14px;

        i {
          margin-right: 5px;
        }
      }
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
